<template>
  <div class="home-root">
    <!-- 头部的欢迎页 -->
    <el-header class="header-wellcome">
      <wellcome></wellcome>
    </el-header>

    <!-- 下方整体 -->
    <el-main class="main-home">

      <el-container style="width:100%;height:100%">
        <!-- 左侧主要内容 -->
        <el-aside class="aside-main">
          <!-- 上方天气 -->
          <el-header class="header-weather">
            <weather></weather>
          </el-header>
          <el-main class="main-chart">
            <!-- 左侧卡片 -->
            <div class="main-chart-stat" style="">
              <statCards></statCards>
            </div>
            <!-- 右侧常用功能 -->
            <div class="main-chart-tabs">
              <div class="tabs-charts-container">
                <div class="tabs-charts-title">
                  常用功能
                </div>
                <div style="height: calc(100% - 40px);">
                  <tabsCharts></tabsCharts>
                </div>
              </div>
            </div>
          </el-main>
        </el-aside>

        <!-- 右侧说明 -->
        <el-main class="main-guardcat-info">
          <!-- <div>
            <img style="height: 450px;" src="@/assets/imgs/生活场景-工作.png" />
          </div> -->
          <div class="tabs-desc-container gradient-linear">
            <tabsDesc></tabsDesc>
          </div>
        </el-main>
      </el-container>

    </el-main>

  </div>
</template>

<script setup lang="ts">
import { onUnmounted, onMounted } from "vue";
import weather from '@/components/Weather.vue';
import wellcome from "./Wellcome.vue";
import tabsCharts from "./TabsCharts.vue";
import tabsDesc from "./TabsDesc.vue";
import statCards from "./StatCards.vue";

onMounted(() => {
})

onUnmounted(() => {
})
</script>

<style scoped lang="scss">
.home-root {
  @include box(100%, 100%);

  .tabs-charts-container {
    height: 100%;
    width: 100%;
    border-radius: 10px;
    border: 2px solid var(--el-color-primary-light-5);
  }

  .tabs-charts-title {
    @include flex(row, flex-start, center);
    @include font(20px, 700);
    height: 40px;
    // padding-left: 10px;
    margin: 0 10px;
    border-bottom: 1px solid var(--el-color-primary-light-5);
    color: var(--el-color-info);
    box-shadow: 0 15px 15px -16px rgba(0, 0, 0, .3);
  }
}


// -------------------------------------------------- wellcome 和 下方整体

.header-wellcome {
  @include box(100%, 75px);
  padding: 0;
}

.main-home {
  @include box(100%, calc(100% - 75px));
  padding: 0;
}

// -------------------------------------------------- wellcome 和 下方整体

.aside-main {
  @include box(calc(100% - 500px), 100%);
  padding: 0;
}

.main-guardcat-info {
  @include box(500px, 100%);
  // padding: 10px 0 0 10px;
  padding: 10px 0 0 0;

  .tabs-desc-container {
    @include box(100%, 100%);
    border: 2px solid var(--el-color-primary-light-5);
    border-radius: 10px;
  }
}

.header-weather {
  @include box(100%, 190px);
  padding: 10px 20px 0 0;
}

// -------------------------------------------------- 左侧的统计和右侧的常用功能
.main-chart {
  @include flex(row, space-between, center);
  @include box(100%, calc(100% - 190px));
  padding: 20px 20px 0 0;

  .main-chart-stat {
    @include box(180px, 100%, 180px, 180px);
  }

  .main-chart-tabs {
    @include box(calc(100% - 180px), 100%);
    padding-left: 20px;
  }
}


/**
永远朝着左下方斜线
*/
.gradient-linear {
  // #f9f9f9
  --xz-bg-color-other-1: #f9f9f9;

  [class="dark"] & {
    --xz-bg-color-other-1: #1d1d1d;
  }

  background: linear-gradient(45deg,
    var(--xz-bg-color-other) 25%,
    var(--xz-bg-color-other-1) 0,
    var(--xz-bg-color-other-1) 50%,
    var(--xz-bg-color-other) 0,
    var(--xz-bg-color-other) 75%,
    var(--xz-bg-color-other-1) 0);
  background-size: 60px 60px;
  animation: alwaysToLeftBottom 120s linear infinite;
}

@keyframes alwaysToLeftBottom {
  to {
    background-position: -300%;
  }
}

.gradient-ease {
  /**
  斜向的渐变背景纯色
  */
  @include box(100%, 100%);
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  // background: linear-gradient(-45deg, #ffffff, #fffaedcf, #f1f1f1, #ffffff, #ffffff, #ffffff);
  background-size: 600% 600%;
  animation: gradientBG 30s ease infinite;

  /**
  斜向循环往复的斜线
  */
  // background: linear-gradient(45deg, #ffffff 25%, #f9f9f9 0, #f9f9f9 50%, #ffffff 0, #ffffff 75%, #f9f9f9 0);
  // background-size: 60px 60px;
  // animation: gradientBG 30s ease infinite;
}

/* 动画，控制背景 background-position */
@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}
</style>